import type { ProFormInstance } from '@ant-design/pro-form';
import { ProFormItem, ProFormUploadButton } from '@ant-design/pro-form';
import ProForm, { ProFormSelect, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import { Button, Card } from 'antd';
import React, { useRef } from 'react';

const Save = () => {
  // 绑定一个 ProFormInstance 实例
  const formRef = useRef<
    ProFormInstance<{
      date: string;
    }>
  >();

  return (
    <Card>
      <ProForm
        style={{
          maxWidth: 800,
          margin: '0 auto',
        }}
        layout="horizontal"
        wrapperCol={{
          span: 24,
        }}
        labelCol={{
          span: 4,
        }}
        onValuesChange={async () => {
          formRef.current?.validateFieldsReturnFormatValue?.().then((val) => {
            // 以下为格式化之后的表单值
            console.log(val.date);
          });
        }}
        // 通过formRef进行绑定
        formRef={formRef}
      >
        <ProFormText label="课程名称" required />
        <ProFormTextArea label="课程描述" required />
        <ProFormUploadButton label="封面图" required />
        <ProFormSelect label="讲师" required />
        <ProFormItem label="课程大纲">
          <Button type="link">编辑</Button>
        </ProFormItem>
      </ProForm>
    </Card>
  );
};

export default Save;
